<template>
  <a-layout-sider
    theme="light"
    ref="side"
    collapsible
    :trigger="null"
    :collapsedWidth="78"
    :width="160"
    
    class="side_bar"    
  >
    <a-menu :defaultSelectedKeys="[siderKey]" width="auto" class="menu">
      <a-menu-item key="settings" class="menu_item">
        <router-link to="/settings">
          <a-icon class="icon" type="code"></a-icon>
          <span class="text">控制台</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="settings_cloud" class="menu_item">
        <router-link to="/settings/cloud">
          <a-icon class="icon" type="cloud"></a-icon>
          <span class="text">云服务</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="settings_end" class="menu_item">
        <router-link to="/settings/end">
          <a-icon class="icon" type="alert"></a-icon>
          <span class="text">挂断策略</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="settings_device" class="menu_item">
        <router-link to="/settings/device">
          <a-icon class="icon" type="setting"></a-icon>
          <span class="text">设备配置</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="settings_user" class="menu_item">
        <router-link to="/settings/user">
          <a-icon class="icon" type="user"></a-icon>
          <span class="text">安全设置</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="settings_about" class="menu_item">
        <router-link to="/settings/about">
          <a-icon class="icon" type="bulb"></a-icon>
          <span class="text">版本动态</span>
        </router-link>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>
<script>

export default {
  data() {
    return {};
  },    
  computed:{
    siderKey(){      
      return this.$route.name
    }
  },
  methods:{    
  }
};
</script>
<style lang="less" scoped>
.side_bar{
  .menu{
    height: 100%;    
    border-right: 3px solid #f5f5f5;
    .ant-menu-item-selected{
    background-color: #f5f5f5;
    a{
      color: #000;
      font-weight: bold;
    }
  }
  }
  
}
</style>